<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>新增短信供应商</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <style>
        .mainBox { padding: 15px; }
        .main-container { max-width: 700px; margin: 0 auto; }
        .layui-form-item { margin-bottom: 22px; }
        .form-tip { 
            display: block; 
            margin-top: 8px; 
            color: #666; 
            font-size: 12px; 
            line-height: 1.5;
        }
        .form-tip i { color: #1E9FFF; margin-right: 4px; }
        .bottom { 
            position: fixed; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            padding: 15px; 
            background: #fff; 
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05); 
            z-index: 99;
        }
        .button-container { text-align: center; }
        .button-container button { margin: 0 10px; }
    </style>
</head>

<body>
    <form class="layui-form" action="" lay-filter="sms-provider-add">
        <div class="mainBox">
            <div class="main-container">
                <!-- 1. 供应商名称（必填，唯一） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商名称 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" 
                               name="sms_name" 
                               id="sms_name" 
                               lay-verify="required" 
                               autocomplete="off" 
                               placeholder="请输入供应商名称（如：阿里云短信、腾讯云短信）" 
                               class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            名称为唯一标识，不可与已存在的供应商重复，建议清晰区分品牌
                        </span>
                    </div>
                </div>

                <!-- 2. 开发者账号（API Key，必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">API Key <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" 
                               name="sms_key" 
                               id="sms_key" 
                               lay-verify="required|verifyKeyLength" 
                               autocomplete="off" 
                               placeholder="请输入供应商平台的API Key" 
                               class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            API Key从供应商平台获取（如阿里云AccessKey ID），长度通常为16-64位
                        </span>
                    </div>
                </div>

                <!-- 3. 开发者密码（API Secret，必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">API Secret <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" 
                               name="sms_secret" 
                               id="sms_secret" 
                               lay-verify="required|verifySecretLength" 
                               autocomplete="off" 
                               placeholder="请输入供应商平台的API Secret" 
                               class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            API Secret需妥善保管，泄露会导致短信发送权限被滥用（如阿里云AccessKey Secret）
                        </span>
                    </div>
                </div>

                <!-- 4. 描述说明（非必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">描述说明</label>
                    <div class="layui-input-block">
                        <textarea name="sms_description" 
                                  id="sms_description" 
                                  autocomplete="off" 
                                  placeholder="请输入供应商的备注说明（便于团队协作）" 
                                  class="layui-textarea" 
                                  rows="3"></textarea>
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            可填写使用场景、负责人等信息（如：“营销短信专用，负责人：张三”）
                        </span>
                    </div>
                </div>

                <!-- 5. 供应商状态（单选，默认启用） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商状态 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_active" value="1" title="启用" lay-skin="tag" checked>
                        <input type="radio" name="is_active" value="0" title="禁用" lay-skin="tag">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            禁用状态的供应商无法被短信模板关联使用
                        </span>
                    </div>
                </div>

                <!-- 6. 排序号（非负整数，默认0） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">排序号</label>
                    <div class="layui-input-block">
                        <input type="text" 
                               name="sort_num" 
                               id="sort_num" 
                               lay-verify="verifySort" 
                               autocomplete="off" 
                               value="0" 
                               placeholder="数字越大，列表中显示越靠前" 
                               class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            支持0-9999之间的非负整数，默认值为0
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部提交按钮区域 -->
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" 
                        lay-submit lay-filter="sms-provider-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm" id="reset-btn">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
                <button type="button" class="pear-btn pear-btn-danger pear-btn-sm" id="close-btn">
                    <i class="layui-icon layui-icon-close"></i>
                    取消
                </button>
            </div>
        </div>
    </form>

    <!-- 引入依赖JS文件 -->
    <script src="../../../component/com/api.js"></script>
    <script src="../../../component/com/auth.js"></script>
    <script src="../../../component/layui/layui.js"></script>
    <script src="../../../component/pear/pear.js"></script>
    <script>
        layui.use(['form', 'jquery', 'layer'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let layer = layui.layer;

            // 1. 基础配置
            const API_BASE_URL = apiConfig.baseUrl;
            const AUTH_TOKEN = window.localStorage.getItem("token") || window.sessionStorage.getItem("token");
            const SMS_PROVIDER_API = `${API_BASE_URL}/sms/provider/`; // 供应商接口
            // const NAME_UNIQUE_API = `${SMS_PROVIDER_API}check-name/`; // 名称唯一性检查接口

            // 2. 表单自定义校验规则
            form.verify({
                // 供应商名称：非空+长度1-50+去空格
                verifyName: function (value) {
                    const trimVal = value.trim();
                    if (!trimVal) return "供应商名称不能为空";
                    if (trimVal.length > 50) return "供应商名称长度不能超过50个字符";
                    return trimVal;
                },
                // 供应商名称唯一性校验（异步）
                // verifyNameUnique: function (value) {
                //     const defer = layui.defer();
                //     const trimVal = value.trim();
                //     $.ajax({
                //         url: NAME_UNIQUE_API,
                //         type: 'GET',
                //         headers: { "Authorization": AUTH_TOKEN },
                //         data: { sms_name: trimVal },
                //         success: function (res) {
                //             if (res.success && res.data.is_exist) {
                //                 defer.reject(`供应商名称「${trimVal}」已存在，请更换`);
                //             } else {
                //                 defer.resolve();
                //             }
                //         },
                //         error: function () {
                //             defer.reject("名称唯一性检查失败，请稍后重试");
                //         }
                //     });
                //     return defer;
                // },
                // API Key长度校验（16-64位）
                verifyKeyLength: function (value) {
                    const trimVal = value.trim();
                    if (trimVal.length < 16 || trimVal.length > 64) {
                        return "API Key长度需在16-64位之间（参考供应商平台要求）";
                    }
                },
                // API Secret长度校验（16-128位）
                verifySecretLength: function (value) {
                    const trimVal = value.trim();
                    if (trimVal.length < 16 || trimVal.length > 128) {
                        return "API Secret长度需在16-128位之间（参考供应商平台要求）";
                    }
                },
                // 排序号：0-9999非负整数
                verifySort: function (value) {
                    const num = parseInt(value);
                    if (isNaN(num) || num < 0 || num > 9999) {
                        return "排序号需为0-9999之间的非负整数";
                    }
                }
            });

            // 3. 表单提交事件
            form.on('submit(sms-provider-save)', function (data) {
                // 处理提交数据（去空+类型转换）
                const formData = {
                    sms_name: data.field.sms_name.trim(),
                    sms_key: data.field.sms_key.trim(),
                    sms_secret: data.field.sms_secret.trim(),
                    sms_description: data.field.sms_description.trim() || "",
                    is_active: parseInt(data.field.is_active), // 转为整数（1/0）
                    sort_num: parseInt(data.field.sort_num) // 转为整数
                };

                // 发送新增请求
                const loading = layer.load(2, { shade: 0.3, shadeClose: false });
                $.ajax({
                    url: SMS_PROVIDER_API,
                    data: JSON.stringify(formData),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'POST',
                    headers: { "Authorization": AUTH_TOKEN },
                    success: function (result) {
                        layer.close(loading);
                        if (result.success || result.code === 200) {
                            layer.msg(result.message || `供应商「${formData.sms_name}」新增成功`, {
                                icon: 1,
                                time: 1500
                            }, function () {
                                // 关闭弹窗+刷新父页面表格
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                                parent.layui.table.reload("base-table");
                            });
                        } else {
                            // 提取错误信息（适配后端序列化器错误格式）
                            let errorMsg = result.message || "新增失败，请重试";
                            if (result.data && typeof result.data === 'object') {
                                const firstKey = Object.keys(result.data)[0];
                                if (firstKey) errorMsg = result.data[firstKey][0];
                            }
                            layer.msg(errorMsg, { icon: 2, time: 2000 });
                        }
                    },
                    error: function (xhr) {
                        layer.close(loading);
                        // 处理网络/权限错误
                        const errorMsg = xhr.status === 401 
                            ? "登录已过期，请重新登录" 
                            : `网络异常（${xhr.status}），新增失败`;
                        layer.msg(errorMsg, { icon: 2, time: 2000 });
                        if (xhr.status === 401) {
                            setTimeout(() => parent.window.location.href = '../../../login.html', 2000);
                        }
                    }
                });

                return false; // 阻止默认提交
            });

            // 4. 重置按钮事件（重置后重新渲染表单，解决单选框样式异常）
            $('#reset-btn').on('click', function() {
                setTimeout(() => {
                    form.render(); // 重新渲染表单元素
                }, 100);
            });

            // 5. 取消按钮事件（关闭当前弹窗）
            $('#close-btn').on('click', function() {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });

            // 6. 页面初始化：检查Token是否存在（未登录则跳转）
            $(function() {
                if (!AUTH_TOKEN) {
                    layer.msg('未检测到登录状态，请先登录', { icon: 2, time: 2000 });
                    setTimeout(() => {
                        parent.window.location.href = '../../../login.html';
                    }, 2000);
                }
            });
        });
    </script>
</body>
</html>